<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词快闪卡</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 全屏闪现模式容器 -->
    <div id="fullscreen-mode" class="fullscreen-mode">
        <div class="fullscreen-flashcard-container">
            <div class="fullscreen-flashcard">
                <div class="fullscreen-word"></div>
                <div class="fullscreen-meaning"></div>
                <div class="fullscreen-image" style="display: none;"></div>
            </div>
            <div class="fullscreen-progress-container">
                <div id="fullscreen-progress-bar" class="fullscreen-progress-bar"></div>
            </div>
        </div>
        <div class="fullscreen-btns">
            <button id="fullscreen-start-btn" class="fullscreen-start-btn">开始</button>
            <button id="fullscreen-stop-btn" class="fullscreen-stop-btn">暂停</button>
            <button id="exit-fullscreen-btn" class="exit-fullscreen-btn">退出全屏</button>
        </div>

    </div>

    <div class="container">
        <h1>单词快闪卡</h1>

        <div class="control-section">
            <h2>导入与设置</h2>
            <div class="mode-selector">
                <label>模式选择：</label>
                <div class="mode-buttons">
                    <button id="word-mode-btn" class="mode-btn active">单词模式</button>
                    <button id="image-mode-btn" class="mode-btn">图片模式</button>
                </div>
            </div>

            <!-- 单词模式导入区域 -->
            <div id="word-import-area" class="import-area">
                <input type="file" id="excel-file" accept=".xlsx, .xls">
                <button id="upload-btn">上传</button>
            </div>

            <!-- 图片模式导入区域 -->
            <div id="image-import-area" class="import-area" style="display: none;">
                <input type="file" id="image-files" accept="image/*" multiple>
                <button id="upload-images-btn">上传</button>
            </div>

            <div class="settings-area">
                <div class="setting-item">
                    <label for="flash-interval">闪现间隔 (秒):</label>
                    <input type="number" id="flash-interval" min="1" max="60" value="3">


                </div>
                <div class="setting-item">
                    <label for="display-time">显示时间 (秒):</label>
                    <input type="number" id="display-time" min="0.5" max="10" step="0.5" value="1">
                </div>
                <div class="control-buttons">
                    <button id="start-btn" disabled>开始</button>
                    <button id="pause-btn" disabled>暂停</button>
                    <button id="fullscreen-btn" disabled>全屏模式</button>
                    <button id="show-word-list-btn" onclick="showWordListModal()" disabled>查看单词列表</button>
                    <!-- 单词列表弹框 -->
                    <div id="word-list-modal" class="modal">
                        <div class="modal-content">
                            <span class="close-modal" onclick="closeWordListModal()">&times;</span>
                            <h2>已导入单词列表</h2>
                            <div id="modal-word-list"></div>
                        </div>
                    </div>
                    <!-- 图片列表弹框 -->
                    <div id="image-list-modal" class="modal">
                        <div class="modal-content">
                            <span class="close-modal" onclick="closeImageListModal()">&times;</span>
                            <h2>已导入图片列表</h2>
                            <div id="modal-image-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flashcard-container">
            <div id="flashcard" class="flashcard">
                <div class="word"></div>
                <div class="meaning"></div>
                <div class="image" style="display: none;"></div>
            </div>
            <div class="progress-container">
                <div id="progress-bar" class="progress-bar"></div>
            </div>
        </div>
    </div>

    <!-- 引入xlsx.js库用于解析Excel文件 -->
    <script src="./xlsx.full.min.js"></script>
    <script src="script.js"></script>
</body>

</html>